<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分形树艺术</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f0f0;
        }
        #controls {
            position: fixed;
            top: 20px;
            left: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div id="controls">
        <label for="angleSlider">角度: </label>
        <input type="range" id="angleSlider" min="0" max="90" value="45">
        <br>
        <label for="depthSlider">深度: </label>
        <input type="range" id="depthSlider" min="1" max="12" value="8">
        <br>
        <label for="lengthSlider">长度: </label>
        <input type="range" id="lengthSlider" min="50" max="200" value="120">
    </div>
    <script src="sketch.js"></script>
</body>
</html>